<template>
	<view>
		<view class="goods-list" v-for="(item, index) in goodsList" :key="index">
			<view class="list-header">
				<view>
					<text class="ns-margin-right">发起拼单</text>
					<text class="ns-font-size-sm ns-text-color-gray">{{ $util.timeStampTurnTime(item.create_time) }}</text>
				</view>
				<view v-if="item.status == 1" class="ns-text-color">待分享</view>
				<view v-else-if="item.status == 2" class="ns-text-color">拼单成功</view>
				<view v-else class="ns-text-color">拼单失败</view>
			</view>
			<view class="list-body" @click="goDetail(item.goods_id)">
				<image :src="$util.img(item.picture_info.pic_cover_mid)"></image>
				<view class="shop-content">
					<view class="shop-title">{{ item.goods_name }}</view>
					<view>
						<text>
							<text class="ns-font-size-sm ns-text-color">¥</text>
							<text class="ns-text-color price-num uni-bold ns-margin-right">{{ item.tuangou_money }}</text>
						</text>
						<text class="ns-font-size-sm">{{ item.tuangou_num }}人拼单</text>
					</view>
				</view>
			</view>
			<view v-if="item.status == 1" class="list-footer">
				<view>
					<text>还剩</text>
					<text class="ns-text-color">{{ item.tuangou_num - item.real_num }}</text>
					<text>人，剩余时间</text>
					<view class="time-wrap">
						<uni-count-down
							class="time"
							:day="item.timeMachine.d"
							:hour="item.timeMachine.h"
							:minute="item.timeMachine.i"
							:second="item.timeMachine.s"
							color="#333"
							splitorColor="#333"
							background-color="transparent"
							border-color="transparent"
							:showColon="false"
						/>
					</view>
				</view>
				<navigator :url="'/promotionpages/pintuan/share/share?goods_id=' + item.goods_id + '&group_id=' + item.group_id">邀请好友</navigator>
			</view>
			<view v-else-if="item.status == 2" class="list-footer">
				<view class="img-box"><image :src="$util.img(item.group_user_head_img)" mode="aspectFit"></image></view>
				<navigator :url="'/pages/order/detail/detail?order_id=' + item.order_id">查看订单详情</navigator>
			</view>
		</view>
		<uni-load-more :status="status" v-if="goodsList.length > 0 && pageCount > 1"></uni-load-more>
		<view v-if="isEmpty && goodsList.length == 0" class="empty" style="padding-top:0">
			<view class="iconfont iconwenzhangchaxun"></view>
			<view class="ns-text-color-gray">没有找到您想要的商品...</view>
			<button type="primary" @click="goIndex()">去首页逛逛吧</button>
		</view>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import uniCountDown from '@/components/uni-count-down/uni-count-down.vue';
export default {
	components: {
		uniLoadMore,
		uniCountDown
	},
	data() {
		return {
			currentTime: '',
			goodsList: [],
			pageIndex: 1,
			pageCount: 0,
			status: 'loading',
			isEmpty: false,
			ident: false //防止初始化时，触发上拉加载
		};
	},
	async onLoad() {
		await this.getCurrentTime();
		this.getGoodsList();
	},
	onReachBottom() {
		if (!this.ident) return;
		this.getGoodsList();
	},
	mixins: [http],
	methods: {
		async getCurrentTime() {
			let res = await this.sendRequest({
				url: 'System.Goods.getCurrentTime',
				async: false
			});
			this.currentTime = res.data / 1000;
		},
		getGoodsList() {
			if (this.status == 'nomore') return;
			this.sendRequest({
				url: 'NsPintuan.Pintuan.pintuanOrder',
				data: {
					page_index: this.pageIndex
				},
				success: res => {
					this.ident = true;
					if (res.code == 0) {
						let list = res.data.data;
						this.pageCount = res.data.page_count;

						if (this.pageCount == 0) {
							this.status = 'nomore';
							this.isEmpty = true;
						} else {
							if (this.pageIndex < this.pageCount) {
								this.status = 'more';
							} else {
								this.status = 'nomore';
							}
							this.isEmpty = false;
							if (list.length > 0) {
								for (let i = 0; i < list.length; i++) {
									let time = this.$util.countDown(list[i].end_time - this.currentTime);
									list[i].timeMachine = time;
								}
								this.goodsList = this.goodsList.concat(list);
								this.pageIndex++;
							}
						}
					}
				}
			});
		},
		goDetail(id) {
			this.$util.redirectTo('/promotionpages/pintuan/detail/detail', { goods_id: id });
		},
		//去首页
		goIndex() {
			this.$util.redirectTo('/pages/index/index/index', {}, 'tabbar');
		}
	}
};
</script>

<style lang="scss">
.goods-list {
	margin-top: 30rpx;
	background-color: #fff;
	&:last-child {
		border-bottom: none;
		margin-bottom: 30rpx;
	}
}
.list-header {
	display: flex;
	justify-content: space-between;
	height: 86rpx;
	padding: 0 30rpx;
	border-bottom: 2rpx solid $ns-border-color-gray;
	text {
		line-height: 86rpx;
	}
	view {
		line-height: 86rpx;
	}
}
.list-body {
	display: flex;
	padding: 30rpx;
	justify-content: space-between;
	image {
		width: 120rpx;
		height: 120rpx;
	}
	.shop-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 531rpx;
		.shop-title {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			line-height: 1.5;
		}
	}
}
.list-footer {
	display: flex;
	height: 80rpx;
	justify-content: space-between;
	justify-content: space-between;
	padding: 0 30rpx;
	align-items: center;
	border-top: 2rpx solid #eee;
	.time-wrap {
		display: inline-block;
		margin-left: 10rpx;
	}
	navigator {
		padding: 0 $ns-padding;
		background: $base-color;
		color: #fff;
		border-radius: 10rpx;
		font-size: $ns-font-size-sm;
		line-height: 60rpx;
	}
	.img-box {
		height: 52rpx;
		image {
			width: 52rpx;
			height: 52rpx;
			border-radius: 50%;
		}
	}
}
</style>
<style scoped>
>>> .uni-countdown__number,
>>> .uni-countdown__splitor {
	margin: 0;
	padding: 0;
}
</style>
